<template>
  <div>
    <p>我有 {{ money }} 块钱</p>
    <!-- 需求: 用户每次点击按钮, 加十块钱 -->
    <!-- 绑定点击事件, 修改 money 就可以实现 -->
    <!-- v-on: 绑定事件 -->
    <!-- 语法: v-on:事件类型="事件处理函数" -->
    <!-- 如果只执行一行代码, 可以直接写在后面 -->
    <!-- 数据驱动视图: 数据变化视图会自动更新 -->
    <button v-on:click="money += 10">点我加十块</button>
    <button v-on:click="add">点我加一块</button>
    <!-- 事件传参 -->
    <!-- 传统理解中: 函数() 表示调用函数 -->
    <!-- 在 Vue 中事件绑定时, 事件处理函数加小括号, 不表示调用, 而是传参 -->
    <button @click="addNum(20)">点我加二十块</button>
    <button @click="addNum(50)">点我加五十块</button>
    <!-- v-on: 可以简写 @ -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 100
    }
  },
  // 和 data 平级的地方写 methods 用于定义函数
  methods: {
    // methods 是一个对象, 可以在里面定义很多函数
    add() {
      console.log('我被点了!')
      // 在 methods 中如果要访问 data 中的数据, 可以在前面加 this.
      // 在组件学习的过程中会给大家详细分析原理, 为什么 this 可以访问到 money
      // console.log(this.money)
      this.money++
    },
    addNum(num) {
      console.log('我执行了')
      this.money += num
    }
  }
}
</script>

<style>

</style>